<template>
  <!-- 修改资料 -->

  <div>
    <el-form
      :model="form"
      label-position="right"
      ref="formRef"
      :rules="formRules"
    >
      <ts-card header="基本信息">
        <el-row :gutter="15">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="编号" prop="number" >
              <el-input v-model="form.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="业务类型"   :required="true">
              <el-select
                v-model="form.transactionKind"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.transactionKindList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="发行总数" prop="qty" >
              <el-input-number v-model="form.qty"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否按订单计算" prop="tradeOrder">
              <el-switch v-model="form.tradeOrder"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="规则类型" prop="ruleType">
              <el-select
                v-model="form.ruleType"
                placeholder="请选择："
                @change="ruleTypeChange"
              >
                <el-option
                  v-for="item in configData.ruleTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <sc-form v-model="form"  :config="formConfig">
            <template #footer>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="是否有门槛" prop="limitOrderAmount">
                  <el-switch v-model="form.limitOrderAmount"></el-switch>
                </el-form-item>
              </el-col>
              <el-col v-if="form.limitOrderAmount === true" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="门槛金额" >
                  <el-input-number v-model="form.limitOrderMinAmount"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="标注在商品上" prop="specTag">
                  <el-switch v-model="form.specTag"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="是否为日常活动">
                  <el-switch
                    v-model="form.dailyRule"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="状态" prop="status">
                  <el-switch
                    v-model="form.status"
                    inline-prompt
                    active-value="normal"
                    inactive-value="disable"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="限制范围说明">
                  <el-input v-model="form.remark"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="说明">
                  <el-input v-model="remark" disabled></el-input>
                </el-form-item>
              </el-col>
            </template>
          </sc-form>
        </el-row>
      </ts-card>
      <ts-card header="领取和使用规则">
        <el-row :gutter="15">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="生效时间">
              <el-date-picker
                v-model="form.startDateTime"
                type="datetime"
                placeholder="Pick a Date"
                format="YYYY/MM/DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="截止时间">
              <el-date-picker
                v-model="form.endDateTime"
                type="datetime"
                placeholder="Pick a Date"
                format="YYYY/MM/DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-row>
            <el-form-item label="领取人级别" prop="firstBuy">
              <el-col :span="12">
                <el-select
                  style="width: 100%"
                  v-model="form.memberLevelIdsArray"
                  clearable
                  placeholder="请选择："
                  multiple
                >
                  <el-option
                    v-for="item in configData.memberLevelList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="form.limitObject"
                  clearable
                  placeholder="请选择："
                >
                  <el-option
                    v-for="item in configData.limitObjectList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-form-item label="限制领取次数">
                  <el-input v-model="form.limitReceiveTimes" type="number">
                  </el-input
                ></el-form-item>
              </el-col>
            </el-form-item>
          </el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="首次使用对象" prop="firstBuy">
              <el-select
                v-model="form.firstBuye"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in configData.firstBuyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="适用产品">
              <el-radio-group
                v-model="form.useGoodRange"
                style="margin-top: -4px"
                @change="useGoodRangeChange"
              >
                <template
                  v-for="(item, index) in configData.useGoodRangeList"
                  :key="index"
                >
                  <el-radio :label="item.value" size="large">{{
                    item.label
                  }}</el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col v-if="form.useGoodRange == '1'" :span="24">
          <el-form-item label="产品类别" prop="goodsCategoryIdsArray">
            <el-tree-select
              style="width: 100%"
              v-model="form.goodsCategoryIdsArray"
              :data="parentData"
              :render-after-expand="false"
              check-strictly="true"
              multiple
              show-checkbox
            />
          </el-form-item>
        </el-col>
        <div v-if="form.useGoodRange == '2' || form.useGoodRange == '3'">
          <el-form-item label="选择商品">
            <sc-table-select
              v-model="dataList"
              fileName="ProductReport"
              :props="productProps"
              multiple
              :inputWidth="500"
              :mapping="productMapping"
              :maxCollapseTags="4"
            ></sc-table-select>
          </el-form-item>
          <el-table :data="dataList">
            <el-table-column prop="number" label="编号"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="mtlKindName" label="类别"></el-table-column>
            <el-table-column prop="spec" label="规格"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
          </el-table>
        </div>

      </ts-card>
      <ts-card v-if="form.ruleType == '4' || form.ruleType == '5'" header="赠品">
          <sc-form-table
            v-model="dtlList"
            dragSort
            :addTemplate="giftTemplate"
            placeholder="暂无数据"
          >
            <template #tableContent>
              <el-table-column label="产品编号" width="300">
                <template #default="scope">
                  <ts-select
                    multipe
                    v-model="scope.row.number"
                    fileName="ProductReport"
                    :template="tableProps"
                    @updateRow="giftChange(scope, $event)"
                    @selectRows="selectRow"
                    :key="selectKey"
                    :mapping="mapping"
                  ></ts-select>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column label="赠送数">
                <template #default="scope">
                  <el-input
                    style="width: 100%"
                    v-model="scope.row.freeQty"
                    type="number"
                    :min="0"
                    controls-position="right"
                  />
                </template>
              </el-table-column>
              <el-table-column label="累计赠品最多数">
                <template #default="scope">
                  <el-input
                    style="width: 100%"
                    v-model="scope.row.maxFreeQty"
                    type="number"
                    :min="0"
                    controls-position="right"
                  />
                </template>
              </el-table-column>
            </template>
          </sc-form-table>
        </ts-card>
    </el-form>
    <!-- </template> -->
    <!-- <template #footer> -->
    <div class="button-position">
      <el-button @click="updateVisible">取 消</el-button>
      <el-button type="primary" @click="addCoupon(formRef)">确 定</el-button>
    </div>
    <!-- </template> -->

    <!-- </myDialog> -->
  </div>
</template>


<script setup>
import { reactive, ref, onMounted } from "vue";
import { ElNotification } from "element-plus";
import Api from "@/api/model/mall";
import { getFormConfig } from "./formConfig";
import tsSelect from "@/components/scSelect/index.vue";
const emit = defineEmits(["updatetable"]);
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});

// 添加用户数据的对象
const form = ref({});
const formConfig = ref({ formItems: [] });
const dataList = ref([]);
const productdtlList = ref([]);
const dtlList = ref([]);
const giftTemplate = ref({});
const tableProps = ref({
  value: "number",
  label: "number",
});
const productMapping = [
{ value: "id", label: "mtlId" },
{ value: "number", label: "number" },
{ value: "name", label: "name" },
{ value: "mtlKindName", label: "mtlKindName" },
{ value: "spec", label: "spec" },
{ value: "price", label: "price" }
]
const mapping =[
    { value: "id", label: "mtlId" },
    { value: "number", label: "number" },
    { value: "name", label: "name" },
]
const selectKey = ref(0);
const remark = ref();
const configData = ref([]);
const parentData = ref([]);
const formRef = ref();
const formRules = reactive({
});
const productProps = {
  value: "mtlId",
  label: "name",
};
onMounted(() => {
  getInit();
  
});

const updateVisible = () => {
  emit("updatetable");
};

const getInit = async () => {
  let res = await Api.coupon.add.post();
  console.log(res);
  if (res.code == "200") {
    configData.value = res.configData;
    form.value = res.data;
    giftTemplate.value = res.gift;
    dtlList.value.push(giftTemplate.value);
  }
  let treeRes = await Api.coupon.tree.post({
    fileName: "ProductCategoryTreeReport",
  });
  if (treeRes.code == "200") {
    parentData.value = treeRes.reportData;
  }
};
const ruleTypeChange = (val) => {
  if (val) {
    formConfig.value = getFormConfig(val);
    console.log(configData.value.ruleTypeList)
    remark.value = configData.value.ruleTypeList.find(ele=>{
        return ele.value == val
    }).remark
  }

  // form.remark
};
const giftChange = (scope, val) => {
  dtlList.value[scope.$index] = val;
};
const selectRow = (val)=>{
    dtlList.value = [...val,...dtlList.value]
//     dtlList.value.forEach((ele, num) => {
//     if (!ele.number && num + 1 !== dtlList.value.length) {
//       dataList.value.splice(num, 1);
//     }
//   });
  selectKey.value += 1;
}
const restAddFormData = () => {
  formRef.value.resetFields();
};

// 上传
const addCoupon = async (formRef) => {
  await formRef.validate((valid, fields) => {
    if (valid) {
      addCouponData();
    }
  });
};

const addCouponData = async () => {
  form.value.goodsIds = dataList.value
    .map((ele) => {
      return ele.mtlId;
    })
    .toString();
  var params = {
    bean: form.value,
    dtlList: dtlList.value.filter((ele) => {
      return ele.mtlId;
    }),
  };

  var res = await Api.coupon.save.post(params);
  console.log(res);
  if (res.code == 200) {
    restAddFormData();
    ElNotification.success({
      title: "",
      message: "添加成功！",
      duration: 2000,
    });
    emit("updatetable", true);
  }
};
</script>

<style scoped></style>

